<template>
  <div class="tree_wrap noselect">
    <el-tree
      :data="treeData"
      show-checkbox
      :node-key="nodeKey"
      default-expand-all
      check-strictly
      :default-checked-keys="defaultCheckedKeyArr"
      :expand-on-click-node="false"
      ref="treeForm"
      :props="{ label: labelKey }"
      @node-click="nodeClickCallback"
    >
      <span
        class="custom-tree-node"
        :class="{ disabled: node.disabled }"
        slot-scope="{ node }"
      >
        <span class="tree_node" :title="node.label">
          {{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "treeCompRadio",
  props: {
    // 该组件支持功能
    // 默认选中节点、默认选中第一个节点、修改展示文本的key、修改唯一标识的key、是否可以取消选中节点
    // 该组件在开启默认选中第一个节点或有传入默认选中节点时，会自动触发回调事件，返回选中节点的code；可以在回调事件中调用相关接口
    // 该组件在开启默认选中第一个节点或有传入默认选中节点时，会自动触发回调事件，返回选中节点的code；可以在回调事件中调用相关接口
    // 该组件在开启默认选中第一个节点或有传入默认选中节点时，会自动触发回调事件，返回选中节点的code；可以在回调事件中调用相关接口
    // 若没有开启默认选中第一个节点和没有传入默认选中节点时，请自行调用相关接口
    treeData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    defaultCheckedKeys: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 展示文本的key值
    labelKey: {
      type: String,
      default: "value",
    },
    // 唯一标识node-key
    nodeKey: {
      type: String,
      default: "code",
    },
    // 是否需要默认选中第一个节点
    // 默认开启
    needCheckedFirstNode: {
      type: Boolean,
      default: true,
    },
    // 单选是否可以取消选中
    // 可以用于单选列表
    canCancel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      maxexpandId: 1000,
      checkedId: "",
      lastNode: false, //最后一个节点
      checkedData: "",
      defaultCheckedKeyArr: [], //默认选中的节点，单选树，数组长度为1
    };
  },
  watch: {
    treeData: function (val) {
      console.log(val.length);
      if (val.length == 0) return;
      // 默认选中第一个节点和传入的默认选中节点互斥,默认选中节点优先.
      if (this.needCheckedFirstNode) {
        // 需要默认选中第一个节点
        if (this.defaultCheckedKeys.length > 0) {
          // 如果传进的需要选中的节点
          this.defaultCheckedKeyArr[0] = this.defaultCheckedKeys[0];
          this.checkedId = this.defaultCheckedKeys[0];
          this.$emit("clickCallback", this.defaultCheckedKeys[0], false, null);
        } else {
          // 若没传入,则默认选中第一个节点
          let code = val[0][this.nodeKey];
          this.defaultCheckedKeyArr[0] = code;
          this.checkedId = code;
          this.$emit("clickCallback", code, false, val[0]);
        }
      } else {
        // 不需要默认选中第一个节点
        if (this.defaultCheckedKeys[0]) {
          // 如果传进的需要选中的节点
          this.defaultCheckedKeyArr[0] = this.defaultCheckedKeys[0];
          this.checkedId = this.defaultCheckedKeys[0];
          this.$emit("clickCallback", this.defaultCheckedKeys[0], false, null);
        }
      }
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {});
  },
  methods: {
    setCheckedData() {
      console.log(this.defaultCheckedKeys[0]);
    },
    getCheckedKeys() {
      console.log(this.$refs.treeForm.getCheckedKeys());
    },
    nodeClickCallback(data, node) {
      if (data.disabled) return;
      var checked = node.checked;
      let nodeId = node.data[this.nodeKey];
      if (checked === true) {
        // 已经被选中，取消选中
        if (this.checkedId == nodeId && this.canCancel) {
          this.$refs.treeForm.setCheckedKeys([]);
          this.checkedId = "";
          this.checkedData = "";
          this.$emit("clickCallback", this.checkedId, this.lastNode, data);
        }
      } else {
        // 未被选中，添加选中
        this.checkedId = nodeId;
        if (data.children && data.children.length > 0) {
          this.lastNode = false;
        } else {
          this.lastNode = true;
        }

        this.$refs.treeForm.setCheckedKeys([data[this.nodeKey]]);
        this.checkedData = node;
        this.$emit("clickCallback", this.checkedId, this.lastNode, data);
      }
    },
  },
};
</script>

<style scoped lang="less">
.tree_wrap {
  width: 100%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  &.disabled {
    color: #b3b3b3;
    cursor: not-allowed;
  }
}

/deep/ .el-tree-node__content > label.el-checkbox {
  pointer-events: none;
}

// 超出显示省略号 鼠标移入展示
/deep/ .custom-tree-node {
  width: 75%;
}

/deep/ .tree_node {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.el-checkbox__inner {
  border-radius: 50%;
}
/deep/.el-checkbox__inner::after {
  // display: none;
}
</style>
